<template>
  <div class="editor-page">
    <div class="container page">
      <div class="row">

        <div class="col-md-10 offset-md-1 col-xs-12">
          <errors-list :errors="errors" />
          <form @submit.prevent="operateArticle">
            <fieldset>
              <fieldset class="form-group">
                <input type="text"
                       v-model="article.title"
                       class="form-control form-control-lg"
                       placeholder="Article Title"
                >
              </fieldset>
              <fieldset class="form-group">
                <input type="text"
                       v-model="article.description"
                       class="form-control"
                       placeholder="What's this article about?"

                >
              </fieldset>
              <fieldset class="form-group">
                <textarea class="form-control"
                          v-model="article.body"
                          rows="8"
                          placeholder="Write your article (in markdown)"
                >
                </textarea>
              </fieldset>
              <fieldset class="form-group">
                <input v-model="article.tagList" type="text" class="form-control" placeholder="Enter tags"><div class="tag-list"></div>
              </fieldset>
              <button class="btn btn-lg pull-xs-right btn-primary" type="submit">
                Publish Article
              </button>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import { createArticle, updateArticle, getArticle } from "@/api/article"
  import ErrorsList from "@/components/ErrorsList"

	export default {
  	middleware: 'authenticated',
  	name: 'EditorIndex',
    components: {
	    ErrorsList,
    },
    data () {
      return {
      	errors: {},
	      article: {
      		title: '',
		      description: '',
          body: '',
          // tagList: ""
        },
        slug: this.$route.params.slug
      }
    },
		created() {
			if (this.slug !== undefined) {
        this.getArticle(this.slug)
			}
		},
    methods: {
  		async getArticle(slug) {
			  const { data } = await getArticle(slug)
			  this.article = data.article
      },
	    operateArticle() {
  			if (this.slug) {
  				this.updateArticle()
        } else {
  				this.createArticle()
        }
      },
	    async createArticle() {
		    // this.article.tagList = this.article.tagList.split(',')

		    try {
	        const { data } = await createArticle(this.article)

          this.$router.push({
            name: 'article',
            params: { slug: data.article.slug }
          })
        } catch (err) {
	        this.errors = err.response.data.errors
        }
	    },
	    async updateArticle() {
		    // this.article.tagList = this.article.tagList.split(',')

		    try {
			    const { data } = await updateArticle(this.slug, this.article)

			    this.$router.push({
				    name: 'article',
				    params: { slug: data.article.slug }
			    })
		    } catch (err) {
			    this.errors = err.response.data.errors
		    }
	    }
    }
  }
</script>